<template>
  <div class="Ticket">
    <Header
      @getlist="getlist"
      @Inputs="Inputs"
      @States="States"
      @Types="Types"
      @add="add"
    />
    <Table :tableData="list" @getlist="getlist" />
    <Page
      :pageCode="form.pageCode"
      :pageSize="form.pageSize"
      :total="form.total"
      @getlist="getlist"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import { HttpTicket } from "api";
import Table from "./component/Table.vue";
import Page from "../../components/Page.vue";
import Header from "../../components/Header.vue";

export default {
  components: { Table, Page, Header },
  data() {
    return {
      list: [],
      form: {
        pageCode: 7,
        pageSize: 1,
        type: "全部",
        val: " ",
        state: "全部",
        total: 1, 
      },
    };
  },
  methods: {
    async getlist() {
      const res = await HttpTicket({ ...this.form });
      this.list = res.data.data; 
      this.form.total = res.data.total;
      console.log(res.data.total);
    },
    handleSizeChange(e) {
      this.form.pageCode = e;
      this.getlist();
    },
    handleCurrentChange(e) {
      this.form.pageSize = e;
      this.getlist();
    },
    Types(e) {
      this.form.type = e;
      this.getlist(); 
    },
    States(e) {
      this.form.state = e;
      this.getlist(); 
    },
    Inputs(e) { 
      this.form.val = e;
      this.getlist();
    },
    add (){
      this.$router.push("/addticket")
    }
  },
  mounted() {
    this.getlist();
  },
};
</script> 
 <style scoped>
.Ticket {
  background-color: white;
  border-radius: 7px;
  margin: 0px auto;
  padding: 15px 0px 50px 10px;
  width: 95%;
}
</style>